<template>
	<div>
		<el-form :model="addForm" :rules="rules" ref="addForm" style="width: calc(100% - 20px)">
			<el-form-item label="报告模板" prop="vrReportTemplateId" label-width="110px">
				<el-input placeholder="请选择报告模板" v-model="addForm.vrReportTemplateName" readonly style="width: 520px"></el-input>
				<el-button type="primary" size="small" @click="openSelect()">选择实验报告模板</el-button>
			</el-form-item>
			<el-form-item label="报告内容" prop="vrCorrectReportContent" label-width="110px">
				<div style="width: 800px;">
					<editor-more :content='addForm.vrCorrectReportContent' @change="addContentChange"></editor-more>
				</div>
			</el-form-item>
		</el-form>
		<div class="add_btns add_btns2" v-if="isChange">
			<el-button type='primary' size='small' @click='checkSelect()'>保存</el-button>
		</div>
		<el-dialog title="选择实验报告模板" :close-on-press-escape="false" :close-on-click-modal="false" :append-to-body="true" width="1300px" destroy-on-close :visible.sync="openSlect" class="paddingSmall coursedialog">
			<span class="search_label">实验模板名称:</span>
			<el-input placeholder="请输入实验模板名称" v-model="name" style="width: 200px; margin-left: 10px" clearable />
			<span class="search_label">所属专业:</span>
			<el-select v-model="majorId" placeholder="请选择所属专业" style="width:200px;margin-left: 10px" clearable>
				<el-option v-for="item in majors" :label="item.name" :value="item.id">
				</el-option>
			</el-select>
			<el-button type="primary" style="margin: 0 0 10px 10px" @click="currentChange(1)">搜索</el-button>
			<div style="margin: 10px">
				<el-table :data="tableDate" border>
					<el-table-column prop="name" label="实验模板名称" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="majorName" label="所属专业" align="center">
					</el-table-column>
					<el-table-column label="操作" align="center" width="120">
						<template slot-scope="scope">
							<el-button type="primary" @click="openInfo(scope.row)" size="small">选择</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div style="margin: 10px; text-align: center">
					<el-pagination background @current-change="currentChange" :current-page="pageNum" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="resetSelect">关闭</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import EditorMore from "@/components/Editor/index.vue";
	import { majorTree } from "@/api/major.js";
	import { vrReportTemplateList, selectVrReportTemplateDetail } from "@/api/vrReportTemplate.js";
	import { detailReport, detailReportSave } from "@/api/vrResourceDetailReport.js";
	export default {
		components: {
			EditorMore
		},
		props: {
			vrResourceDetailId: {
				required: true,
				default: "",
			},
		},
		data() {
			return {
				addForm: {
					vrReportTemplateId: "",
					vrReportTemplateName: "",
					vrCorrectReportContent: "",
				},
				rules: {
					vrReportTemplateId: [{
						required: true,
						message: "请选择报告模板",
					}, ],
					vrCorrectReportContent: [{
						required: true,
						message: "请输入报告内容",
						trigger: "blur",
					}, ],
				},
				openSlect: false,
				tableDate: [],
				name: "",
				majorId: "",
				pageNum: 1,
				pageSize: 10,
				total: 0,
				majors: [],
				isChange: false,
				firstLoaded: false,
			};
		},
		created() {
			this.getMajorList();
			this.getDateInfo();
		},
		mounted() {},
		methods: {
			hasChangeOver() {
				this.$emit('changeDoing', false);
				this.isChange = false;
			},
			hasChanged() {
				this.$emit('changeDoing', true);
				this.isChange = true;
			},
			checkSelect() {
				this.$refs.addForm.validate(valid => {
					if(valid) {
						var data = Object.assign({}, this.addForm, {
							vrResourceDetailId: this.vrResourceDetailId
						})
						detailReportSave(data).then(res => {
							if(res.code == '200') {
								this.$message({
									message: res.message,
									type: "success"
								});
								this.hasChangeOver()
							} else {
								this.$message({
									message: res.message,
									type: "error"
								});
							}
						})
					}
				})
			},
			addContentChange(data) {
				this.addForm.vrCorrectReportContent = data.html;
				if(this.firstLoaded) {
					this.hasChanged();
				} else {
					this.firstLoaded = true;
				}
			},
			resetSelect() {
				this.openSlect = false;
			},
			openInfo(item) {
				selectVrReportTemplateDetail({
					vrReportTemplateId: item.vrReportTemplateId,
				}).then(res => {
					this.addForm.vrReportTemplateId = res.data.vrReportTemplateId;
					this.addForm.vrReportTemplateName = res.data.name;
					this.addForm.vrCorrectReportContent = res.data.content;
					this.resetSelect();
					this.hasChanged();
				});
			},
			openSelect() {
				this.name = "";
				this.majorId = "";
				this.openSlect = true;
				this.currentChange(1);
			},
			getDateInfo() {
				detailReport({
					vrResourceDetailId: this.vrResourceDetailId
				}).then(res => {
					this.addForm = Object.assign({}, this.addForm, res.data)
				})
			},
			getMajorList() {
				majorTree({}).then((res) => {
					this.majors = res.data || [];
				});
			},
			currentChange(pageNum) {
				this.pageNum = pageNum;
				this.getDateList();
			},
			getDateList() {
				var data = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					name: this.name ? this.name : null,
					majorId: this.majorId,
				};
				vrReportTemplateList(data).then(async(res) => {
					this.tableDate = res.data.list;
					this.total = res.data.total;
				});
			},
		},
	};
</script>
<style type="text/css" scoped="scoped">
	.add_btns {
		height: auto;
		padding: 0 0 10px 0;
		text-align: right;
	}
	
	.add_btns2 {
		padding: 15px 0 0 0;
		text-align: center;
		width: 910px;
	}
</style>